@import '@assets/base/common.scss';

.common-header {
    width: 100%;
    height: 100%;
    padding: 0 10px;
    background-color: $bg0;
    @include flex_layout(row, flex-start, center);

    .page-logo {
        display: block;
        padding-right: 15px;
        @include flex_layout(row, flex-start, center);

        .logo {
            margin-right: 10px;
        }

        .title {
            font-size: $fzbl;
            color: $cor0;
        }
    }

    .header-content {
        flex: 1;
        height: 100%;
        @include flex_layout(row, flex-start, center);

        .header-box {
            flex: 1;
        }

        .user-center {
            @include position();
            @include flex_layout(row, flex-start, center);

            .user-img {
                width: 26px;
                height: 26px;
                border-radius: 50%;
                margin-right: 6px;
            }

            &:hover {
                .config-list-content {
                    display: block;
                }
                .user-name .icon-i {
                    transform: rotate(180deg);
                    -webkit-transform: rotate(180deg);
                }
            }

            .user-name {
                flex: 1;
                line-height: 20px;
                padding-right: 20px;
                min-width: 60px;
                max-width: 120px;
                @include ell_n();
                font-size: $fzn;
                color: $cor0;
                @include position();

                .icon-i {
                    display: block;
                    width: 1px;
                    height: 1px;
                    background-color: transparent;
                    transition: all 0.3s linear;
                    -webkit-transition: all 0.3s linear;
                    @include position_center(right, 9px);

                    &:after {
                        display: block;
                        content: '';
                        @include position_center(top, -2px);
                        @include arrow(6px, top, $bg1);
                    }
                }

            }

            .config-list-content {
                @include position(absolute, left, top, 50%, 100%, 9);
                transform: translate3d(-50%, 0, 0);
                padding: 12px 0px;
                max-width: 100px;
                width: 100%;
                background-color: $bg0;
                display: none;

                .user-option {
                    width: 100%;
                    height: 32px;
                    line-height: 32px;
                    padding: 0 5px;
                    color: $cor0;
                    font-size: $fzn;
                    text-align: center;

                    &:hover {
                        background-color: $bg4;
                    }
                }
            }
        }
    }

}

.fix-pwd-content {
    width: 400px;
    margin: 0 auto;

    .fix-item {
        margin-bottom: 15px;
        &:last-child {
            margin-bottom: 0;
        }

        &:after {
            @include cf();
        }

        .ipt-parent {
            float: right;
            width: 300px;
            border: $b1;
            border-radius: 2px;

            .item-ipt {
                width: 100%;
                padding: 0 10px;
                height: 30px;
                line-height: 30px;
                background-color: transparent;

                &::-webkit-input-placeholder {
                    color: $cor5;
                }
            }
        }

        .item-title {
            display: block;
            zoom: 1;
            overflow: hidden;
            padding-right: 10px;
            height: 32px;
            line-height: 32px;
            text-align: right;
            color: $cor5;
            font-size: $fzn;
        }
    }
}

.login-out {
    padding: 20px 0;
    text-align: center;
    font-size: $fzsl;
}